<template>
  <div id="left-top"></div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
//@ts-ignore
import echarts from "@/hooks/useEcharts";
// import { getCostStatistics } from '@/api/home'
//@ts-ignore
import { businessApi } from "@/api/dataScreen/index.js";
import { ElMessage } from "element-plus";

const colors = [
  "#178BFF",
  "#adceef",
  "#58a55c",
  "#f2bd42",
  "#ee752f",
  "#d95040",
  "#ED4FEC",
];

const echartData = ref([]);
onMounted(() => {
  getData("");
});
const initEchats = async () => {
  var chartDom = document.getElementById("left-top");
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    color: colors,
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "horizontal",
      // top: 12,
      icon: "circle",
      // l: 0,
      itemHeight: 8,
      itemWidth: 8,
    },
    textStyle: {
      fontSize: 10,
    },
    series: [
      {
        type: "pie",
        radius: "50%",
        center: ["49%", "50%"],
        avoidLabelOverlap: false,
        // itemStyle: {
        //   // borderRadius: 10,
        //   borderColor: "#fff",
        //   borderWidth: 2,
        // },
        // formatter: "{a} <br\/>{b} : {c}%",
        label: {
          formatter: "{b} \n{d}%({c})",
          // formatter: "{b} \n{d}%",
        },
        // normal: {
        //   label: {
        //     show: true,
        //     fontSize: 10,
        //   },
        // },

        labelLine: {
          show: true,
          normal: {
            length: 6, //第一条线
            length2: 12, //第二条线
          },
        },
        data: echartData.value.map((item, index) => {
          item.label = {
            color: colors[index],
          };
          return item;
        }),
      },
    ],
  };
  option && myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
};

async function getData(date: any) {
  const data = {
    times: date,
  };
  const response = await businessApi(data);
  if (response.code === 200 && response.data) {
    echartData.value = response.data.map((item) => ({
      name: item.name,
      value: item.value,
    }));
  } else {
    ElMessage.error(response.msg);
  }

  // echartData.value = [
  //   // { value: 15, name: '总计' },
  //   {
  //     value: 10,
  //     name: "工程咨询",
  //     label: {
  //       color: "#178BFF",
  //     },
  //   },
  //   {
  //     value: 20,
  //     name: "环境咨询",
  //     label: {
  //       color: "#adceef",
  //     },
  //   },
  //   {
  //     value: 25,
  //     name: "招标采购",
  //     label: {
  //       color: "#58a55c",
  //     },
  //   },
  //   {
  //     value: 15,
  //     name: "造价咨询",
  //     label: {
  //       color: "#f2bd42",
  //     },
  //   },
  //   {
  //     value: 3,
  //     name: "工程监理",
  //     label: {
  //       color: "#ee752f",
  //     },
  //   },
  //   {
  //     value: 20,
  //     name: "项目管理",
  //     label: {
  //       color: "#d95040",
  //     },
  //   },
  //   {
  //     value: 7,
  //     name: "全过程咨询",
  //     label: {
  //       color: "#ED4FEC",
  //     },
  //   },
  // ];
  initEchats();
}

defineExpose({ getData });
</script>
<style scoped lang="scss">
.left-center {
  width: 100%;
}
</style>
